<template>
  <div class="dynamic">
      <div class="box box1">box1：渐变背景色</div>
      <div class="box box2">box2：线性渐变 - 透明度</div>
      <div class="box box3">box3：渐变彩虹</div>

  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.dynamic{
    width: 100%;
    height: 100vh;
    font-family: "montserrat";
    color: #fff;
    font-size: 22px;
    text-transform: uppercase; // 把字母都转换为大写
    // text-transform: lowercase; // 把字母都转换为小写
    // text-transform: capitalize; // 每个单词以大写字母开头

    .box{
        width: 100%;
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box + .box{  // 选择除了第一个box以外的兄弟元素
        margin-top: 10px;
    }
    .box1{
        background-image: linear-gradient(125deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad);
        background-size: 400%;  // 背景图像的大小
        animation: bganimation 15s infinite;

    }
    .box2{
        background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
        background-size: 300%;
        animation: bganimation 15s infinite;
    }
    .box3{
        background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
        background-size: 500%;
        animation: bganimation 15s infinite;
    }
}
    @keyframes bganimation {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }
</style>
